<template>
  <div class="snsmessage_main">
    <div class="snsmessage_main_header">
      <ItemPanelHeader :item="item">
        <FollowButton
          slot="itemPanelHeaderMenu"
          :item="item"
          slot-scope="{ item }"
        ></FollowButton>
      </ItemPanelHeader>
    </div>
    <div class="snsmessage_main_messages">
      <div v-for="(sitem, index) in messages" :key="'message_' + index">
        <MessageItem
          :items="item"
          v-if="sitem.userId !== $store.state.user.userId"
        >
          <div class="snsmessage_main_message" slot="message">
            {{ sitem.content }}
            <p>{{ getTimeFormate(sitem.lastTime) }}{{ $t('lang["发布"]') }}</p>
          </div>
        </MessageItem>
        <MessageItem
          :items="item"
          v-if="sitem.userId === $store.state.user.userId"
          :messageType="messageType"
        >
          <div class="snsmessage_main_message on" slot="message">
            {{ sitem.content }}
            <p>{{ getTimeFormate(sitem.lastTime) }}{{ $t('lang["发布"]') }}</p>
          </div>
        </MessageItem>
      </div>
    </div>
    <div class="snsmessage_main_bottom">
      <div class="snsmessage_main_inputs">
        <div class="snsmessage_main_inputs_item">
          <input
            v-model="messageContent"
            :placeholder="this.$t('lang.发消息')"
          />
        </div>
        <div class="snsmessage_main_inputs_item">
          <a href="javascript:;" @click="clearMessageClickHandle"
            ><i class="icon-close"></i
          ></a>
        </div>
        <div class="snsmessage_main_inputs_item">
          <a href="javascript:;" @click="sendMessageClickHandle">{{
            $t("lang.发送")
          }}</a>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "SnsMessageMain",
  data() {
    return {
      item: {},
      messages: [],
      messageType: 2,
      messageContent: "",
    };
  },
  components: {
    ItemPanelHeader: () =>
      import(
        /* webpackChunkName:"itemPanelHeader" */ "../../components/common/itemPanel/itemPanelHeader.vue"
      ),
    MessageItem: () =>
      import(
        /* webpackChunkName:"messageItem" */ "../../components/common/messageItem.vue"
      ),
    FollowButton: () =>
      import(
        /* webpackChunkName:"followButton" */ "../../components/common/followButton.vue"
      ),
  },
  created() {
    this.item = {
      id: "0123456",
      userId: "0123456",
      userHead:
        "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595233833221&di=8cf8621bb5bdae4844362dfe99c54191&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fbd315c6034a85edf8c1758e240540923dc547553.jpg",
      nickName: "undefined",
      position: "中国",
      isNewContent: true,
      description: "个人介绍信息，个人信息",
      noteTotal: 200,
      follower: 100,
      follows: 3000,
      tags: [
        "电影",
        "Vue",
        "React",
        "电影",
        "Vue",
        "React",
        "电影",
        "Vue",
        "React",
      ],
    };
    this.messages = [
      {
        userId: "0123456",
        userHead:
          "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595233833221&di=8cf8621bb5bdae4844362dfe99c54191&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fbd315c6034a85edf8c1758e240540923dc547553.jpg",
        nickName: "undefined",
        position: "中国",
        isNewContent: true,
        contentId: "0123456",
        content: "1 adfasdfadfa,adfasdfas,adfa,sdf,ad...adfasd.",
        lastTime: 1595245074825,
      },
      {
        userId: "6543210",
        userHead:
          "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595233833221&di=8cf8621bb5bdae4844362dfe99c54191&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fbd315c6034a85edf8c1758e240540923dc547553.jpg",
        nickName: "undefined",
        position: "中国",
        isNewContent: true,
        contentId: "0123456",
        content: "2 adfasdfadfa,adfasdfas,adfa,sdf,ad...adfasd.",
        lastTime: 1595245074825,
      },
      {
        userId: "0123456",
        userHead:
          "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595233833221&di=8cf8621bb5bdae4844362dfe99c54191&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fbd315c6034a85edf8c1758e240540923dc547553.jpg",
        nickName: "undefined",
        position: "中国",
        isNewContent: true,
        contentId: "0123456",
        content: "1 adfasdfadfa,adfasdfas,adfa,sdf,ad...adfasd.",
        lastTime: 1595245074825,
      },
      {
        userId: "0123456",
        userHead:
          "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595233833221&di=8cf8621bb5bdae4844362dfe99c54191&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fbd315c6034a85edf8c1758e240540923dc547553.jpg",
        nickName: "undefined",
        position: "中国",
        isNewContent: true,
        contentId: "0123456",
        content: "1 adfasdfadfa,adfasdfas,adfa,sdf,ad...adfasd.",
        lastTime: 1595245074825,
      },
      {
        userId: "6543210",
        userHead:
          "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595233833221&di=8cf8621bb5bdae4844362dfe99c54191&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fbd315c6034a85edf8c1758e240540923dc547553.jpg",
        nickName: "undefined",
        position: "中国",
        isNewContent: true,
        contentId: "0123456",
        content: "2 adfasdfadfa,adfasdfas,adfa,sdf,ad...adfasd.",
        lastTime: 1595245074825,
      },
      {
        userId: "0123456",
        userHead:
          "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595233833221&di=8cf8621bb5bdae4844362dfe99c54191&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fbd315c6034a85edf8c1758e240540923dc547553.jpg",
        nickName: "undefined",
        position: "中国",
        isNewContent: true,
        contentId: "0123456",
        content: "1 adfasdfadfa,adfasdfas,adfa,sdf,ad...adfasd.",
        lastTime: 1595245074825,
      },
      {
        userId: "6543210",
        userHead:
          "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595233833221&di=8cf8621bb5bdae4844362dfe99c54191&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fbd315c6034a85edf8c1758e240540923dc547553.jpg",
        nickName: "undefined",
        position: "中国",
        isNewContent: true,
        contentId: "0123456",
        content: "2 adfasdfadfa,adfasdfas,adfa,sdf,ad...adfasd.",
        lastTime: 1595245074825,
      },
      {
        userId: "0123456",
        userHead:
          "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595233833221&di=8cf8621bb5bdae4844362dfe99c54191&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fbd315c6034a85edf8c1758e240540923dc547553.jpg",
        nickName: "undefined",
        position: "中国",
        isNewContent: true,
        contentId: "0123456",
        content: "1 adfasdfadfa,adfasdfas,adfa,sdf,ad...adfasd.",
        lastTime: 1595245074825,
      },
      {
        userId: "6543210",
        userHead:
          "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595233833221&di=8cf8621bb5bdae4844362dfe99c54191&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fbd315c6034a85edf8c1758e240540923dc547553.jpg",
        nickName: "undefined",
        position: "中国",
        isNewContent: true,
        contentId: "0123456",
        content: "2 adfasdfadfa,adfasdfas,adfa,sdf,ad...adfasd.",
        lastTime: 1595245074825,
      },
      {
        userId: "0123456",
        userHead:
          "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595233833221&di=8cf8621bb5bdae4844362dfe99c54191&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fbd315c6034a85edf8c1758e240540923dc547553.jpg",
        nickName: "undefined",
        position: "中国",
        isNewContent: true,
        contentId: "0123456",
        content: "1 adfasdfadfa,adfasdfas,adfa,sdf,ad...adfasd.",
        lastTime: 1595245074825,
      },
      {
        userId: "6543210",
        userHead:
          "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595233833221&di=8cf8621bb5bdae4844362dfe99c54191&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fbd315c6034a85edf8c1758e240540923dc547553.jpg",
        nickName: "undefined",
        position: "中国",
        isNewContent: true,
        contentId: "0123456",
        content: "2 adfasdfadfa,adfasdfas,adfa,sdf,ad...adfasd.",
        lastTime: 1595245074825,
      },
      {
        userId: "0123456",
        userHead:
          "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595233833221&di=8cf8621bb5bdae4844362dfe99c54191&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fbd315c6034a85edf8c1758e240540923dc547553.jpg",
        nickName: "undefined",
        position: "中国",
        isNewContent: true,
        contentId: "0123456",
        content: "1 adfasdfadfa,adfasdfas,adfa,sdf,ad...adfasd.",
        lastTime: 1595245074825,
      },
      {
        userId: "6543210",
        userHead:
          "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595233833221&di=8cf8621bb5bdae4844362dfe99c54191&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fbd315c6034a85edf8c1758e240540923dc547553.jpg",
        nickName: "undefined",
        position: "中国",
        isNewContent: true,
        contentId: "0123456",
        content: "2 adfasdfadfa,adfasdfas,adfa,sdf,ad...adfasd.",
        lastTime: 1595245074825,
      },
      {
        userId: "6543210",
        userHead:
          "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595233833221&di=8cf8621bb5bdae4844362dfe99c54191&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fbd315c6034a85edf8c1758e240540923dc547553.jpg",
        nickName: "undefined",
        position: "中国",
        isNewContent: true,
        contentId: "0123456",
        content: "2 adfasdfadfa,adfasdfas,adfa,sdf,ad...adfasd.",
        lastTime: 1595245074825,
      },
    ];
  },
  methods: {
    getTimeFormate(v) {
      return this.formatDate(v, "yyyy-MM-dd");
    },
    sendMessageClickHandle() {},
    clearMessageClickHandle() {},
  },
};
</script>
<style lang="less">
@base: 23.44rem;
.snsmessage_main {
  .snsmessage_main_header {
    border-bottom: 1 / @base solid #efefef;
    position: fixed;
    top: 45 / @base;
    left: 0;
    right: 0;
    background-color: #fff;
    z-index: 2000;
  }
  .snsmessage_main_messages {
    padding: 20 / @base 20 / @base;
    margin: 100 / @base 0 0;
    .messageitem {
      margin: 0 0 10 / @base 0;
    }
    .snsmessage_main_message {
      text-align: left;
      word-wrap: break-word;
      p {
        font-size: 12 / @base;
        color: #999;
      }
      &.on {
      }
    }
  }
  .snsmessage_main_bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2000;
    .snsmessage_main_inputs {
      border: 1 / @base solid #ccc;
      border-radius: 45 / @base;
      margin: 10 / @base;
      background-color: #fff;
      padding: 10 / @base;
      display: flex;
      .snsmessage_main_inputs_item {
        width: 10%;
        a {
          display: block;
          line-height: 30 / @base;
        }
        &:first-child {
          width: 80%;
          display: flex;
          input {
            display: block;
            padding: 5 / @base;
            width: 100%;
            border: 0;
          }
        }
        &:last-child {
          width: 20%;
          border-left: 1 / @base solid #efefef;
        }
      }
    }
  }
}
</style>
